<template>
  <div
    style="background:#fff;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;color:#666; font-size: 15px;"
  >
    <div style="width:100%">
      <span
        style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
    color:#000
"
      >
        <i class="el-icon-document"></i>活动审批
      </span>
      <el-button
        @click="goback()"
        size="mini"
        round
        style="margin-left: 1000px;"
        type="primary"
        >返回</el-button
      >
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>直播计划名称：</span>
            <span>{{ this.formCorp.planName }}</span>
          </div>
        </el-col>

        <el-col :span="6" :push="2">
          <div class="grid-content bg-purple">
            <span>组织方：{{ '总部' }}</span>
          </div>
        </el-col>
        <el-col :span="9" :push="2">
          <div class="grid-content bg-purple">
            <span
              >直播时间：{{
                this.formCorp.beginTime + '至' + this.formCorp.endTime
              }}</span
            >
          </div>
        </el-col>
      </el-row>

      <div v-for="item in this.formCorp.zbHomeDTOList" :key="item.uuid">
        <el-divider></el-divider>

        <el-row :gutter="20">
          <el-col :span="6" :push="1">
            <div class="grid-content bg-purple">
              <span>直播间名称：{{ item.name }}</span>
            </div>
          </el-col>
          <el-col :span="9" :push="2">
            <div class="grid-content bg-purple">
              <span>直播时段：{{ item.startTime + '-' + item.endTime }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :push="1">
            <div class="grid-content bg-purple">
              <span>主播昵称：{{ item.anchorName }}</span>
            </div>
          </el-col>
          <el-col :span="6" :push="2">
            <div class="grid-content bg-purple">
              <span>主播微信号：</span>
              <span>{{ item.anchorWechat }}</span>
            </div>
          </el-col>
          <!--        <el-col :span="6" :push="2">-->
          <!--          <div class="grid-content bg-purple">-->
          <!--            <span>主播昵称：</span>-->
          <!--            <span>{{item.anchorName}}</span>-->
          <!--          </div>-->
          <!--        </el-col>-->
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6" :push="1">
            <div class="grid-content bg-purple">
              <span>状态：</span>
              <span v-if="item.liveStatus == 101">直播中</span>
              <span v-if="item.liveStatus == 102">未开始</span>
              <span v-if="item.liveStatus == 103">已结束</span>
              <span v-if="item.liveStatus == 104">禁播</span>
              <span v-if="item.liveStatus == 105">暂停</span>
              <span v-if="item.liveStatus == 106">异常</span>
              <span v-if="item.liveStatus == 107">已过期</span>
            </div>
          </el-col>

          <el-col :span="6" :push="2">
            <div class="grid-content bg-purple">
              <span>直播间分享图：</span>
              <span v-if="flagimg">
                <img
                  :src="item.coverImgUrl"
                  v-if="item.coverImgUrl"
                  style="width:100px;height:100px"
                  class="avatar"
                  @click="dialogVisible = true"
                />
                <i
                  v-else
                  class="el-icon-picture-outline"
                  style="width:100px;height:100px"
                ></i>
              </span>

              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="item.coverImgUrl" alt />
              </el-dialog>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div style="width:100%">
      <span
        style="    font-size: 20px;margin: 30px 40px;display: inline-block;color:#000"
      >
        <i class="el-icon-data-analysis"></i>直播商品
      </span>
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        style="width: 80%;margin-bottom: 20px;"
        border
        default-expand-all
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
          fixed
        ></el-table-column>
        <el-table-column
          align="center"
          prop="picUrl"
          label="商品图片"
          width="200"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.picUrl"
              v-if="scope.row.picUrl != '' && scope.row.picUrl != null"
              width="70"
              height="50"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="商品名称"
          align="left"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="unitName"
          label="商品规格"
          align="left"
          min-width="120"
        ></el-table-column>
        <el-table-column label="审核状态" align="right" min-width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.auditStatus == '0'">未审核</span>
            <span v-if="scope.row.auditStatus == '1'">审核中</span>
            <span v-if="scope.row.auditStatus == '2'">审核通过</span>
            <span v-if="scope.row.auditStatus == '3'">审核失败</span>
            <span v-if="scope.row.auditStatus == '4'">未提交</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="marketSalePrice"
          label="市场价格"
          align="right"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="salePrice"
          label="直播价格"
          align="right"
          min-width="120"
        ></el-table-column>
        <!-- <el-table-column prop="saleAmount" label="是否参与直播" align="center">
         <template slot-scope="scope">
           <el-switch v-model="scope.row.isInfoComplete" active-color="#13ce66" inactive-color="#DCDFE6" disabled></el-switch>
                </template>
      </el-table-column> -->
      </el-table>
    </div>

    <div style="width:100%">
      <span
        style="font-size: 20px;margin: 30px 40px;display: inline-block;color:#000"
      >
        <i class="el-icon-bank-card"></i>审批意见
      </span>

      <el-table
        :data="tableData2"
        stripe
        style="width: 80%"
        border
        v-loading="loading"
        :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
      >
        <el-table-column
          prop="approvalStatus"
          label="审核状态"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.approvalStatus === 1">已提交</span>
            <span v-if="scope.row.approvalStatus === 2">已通过</span>
            <span v-if="scope.row.approvalStatus === 3">已驳回</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="approvalComments"
          label="审核意见"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="approvalUser"
          label="审核人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="approvalTime"
          label="审核时间"
          align="center"
        ></el-table-column>
      </el-table>
    </div>

    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      style="margin-top:20px;width:900px"
      v-if="shenhe"
    >
      <!-- <el-form-item label="是否通过" prop="approvalStatus" style="margin:10px 0">
          <el-select v-model="ruleForm.approvalStatus">
            <el-option label="通过" value="2"></el-option>
            <el-option label="不通过" value="3"></el-option>
          </el-select>
        </el-form-item> -->

      <el-form-item label="审核意见" prop="approvalComments">
        <el-input
          type="textarea"
          v-model="ruleForm.approvalComments"
          :rows="6"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="shenhe">
      <el-button
        size="mini"
        @click="confirmEdit(3)"
        type="danger"
        :loading="loading"
        >退 回</el-button
      >
      <el-button
        type="primary"
        @click="confirmEdit(2)"
        size="mini"
        :loading="loading"
        >审批通过</el-button
      >
    </span>
  </div>
</template>

<script>
import {
  shopPreliminary,
  finalReview,
  storeFinalReview,
} from '@/api/addShopapply';
import { query_getStorZbPlanInfo, save_review } from '@/api/liveStore';
import qs from 'qs';
export default {
  name: 'AddMerchants',
  components: {},
  props: {},
  data() {
    return {
      keepAlive: true,
      shenhe: false,
      formInline: '',
      shenheone: false,
      uuid: '',
      logininfo: '',
      reviewTypeflag: '',
      ruleForm: {
        approvalStatus: '',
        approvalComments: '',
      },
      approvalComments: '',
      rules: {
        approvalStatus: [
          { required: true, message: '请选择审核意见', trigger: 'blur' },
        ],
        approvalComments: [
          { required: true, message: '请输入审核意见', trigger: 'blur' },
        ],
      },
      loading: true,
      tableData: [],
      tableData2: [],
      formCorp: {
        planName: '',
        beginTime: '',
        endTime: '',
        storeType: '1', //店铺类型(1标准店、2精品店、3综合体验店)
        managerArea: '', //经营面积
        openStatus: '',
        buildingArea: '', //建筑面积
        practicalArea: '', //实用面积
        leaseholdArea: '', //租赁面积
        warehouseArea: '', //仓库面积
        planCode: '',
        picUrl: '', //
        zbHomeDTOList: [],
      },
      flagimg: true,
      dialogVisible: false,
      // 店铺信息
      formShop: {
        openDate: '', //经营状态
        province: '', //租赁时间 开业时间
        city: '',
        county: '',
        storeAddressDetail: '',
        companyName: '',
      },
      userType: '',
    };
  },
  watch: {},
  computed: {},
  mounted() {
    console.log(this.$route.params.v, 'llll');

    this.getdetail();
    this.logininfo = localStorage.getItem('logininfo');
    this.approvalComments = this.$route.params.v.approvalComments;
    this.formInline = this.$route.params.formInline;

    if (this.$route.params.shenhe == true) {
      this.shenhe = true;
    } else if (this.$route.params.shenhe == false) {
      this.shenheone = true;
    }
  },
  methods: {
    cancelone() {
      this.$router.go(-1);
    },
    confirmEdit(val) {
      //           if (this.$route.params.v.reviewType == 1) {
      //   this.reviewTypeflag = true;
      // } else if (this.$route.params.v.reviewType == 2) {
      //   this.reviewTypeflag = false;
      // }

      this.uuid = this.$route.params.v.uuid;
      this.ruleForm.approvalStatus = val;
      console.log(this.reviewTypeflag, 'rrr');
      if (
        this.ruleForm.approvalStatus == '' ||
        this.ruleForm.approvalStatus == null
      ) {
        this.$message.error('请选择审核意见');
        return;
      }
      if (
        this.ruleForm.approvalComments == '' ||
        this.ruleForm.approvalComments == null
      ) {
        this.$message.error('请输入审核意见');
        return;
      }
      this.keepAlive = false;
      this.loading = true;
      let data = {
        uuid: this.uuid,
        approvalUser: JSON.parse(this.logininfo).userName,
        approvalStatus: this.ruleForm.approvalStatus,
        approvalComments: this.ruleForm.approvalComments,
      };
      // this.$router.push({name:"warexamine",params:{formInline: this.formInline}})
      // if (this.reviewTypeflag === true) {
      save_review(data).then((res) => {
        this.loading = false;
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success',
          });
          // this.$router.push("/warexamine")
          // this.$router.push({name:"headquartersLiveBroadcastApproval",params:{formInline: this.formInline}})
          this.$router.back();
        } else if (res.code == 0) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error',
          });
        }
      });
      // }
      // else if (this.reviewTypeflag === false) {
      //   shopPreliminary(data).then(res => {
      //     if (res.code == 1) {
      //       this.$message({
      //         showClose: true,
      //         message: res.message,
      //         type: "success"
      //       });
      //       // this.$router.push("/warexamine")
      //         this.$router.push({name:"headquartersLiveBroadcastApproval",params:{formInline: this.formInline}})
      //     } else if (res.code == 0) {
      //       this.$message({
      //         showClose: true,
      //         message: res.message,
      //         type: "error"
      //       });
      //     }

      //   });
      // }
    },
    confirmEditone(v) {
      //      if (this.$route.params.v.reviewType == 1) {
      //   this.reviewTypeflag = true;
      // } else if (this.$route.params.v.reviewType == 2) {
      //   this.reviewTypeflag = false;
      // }
      this.uuid = this.$route.params.v.uuid;
      if (
        this.ruleForm.approvalStatus == '' ||
        this.ruleForm.approvalStatus == null
      ) {
        this.$message.error('请选择总部审核意见');
        return;
      }
      if (
        this.ruleForm.finalReviewOpinion == '' ||
        this.ruleForm.finalReviewOpinion == null
      ) {
        this.$message.error('请输入复审意见');
        return;
      }
      this.keepAlive = false;
      let data = {
        uuid: this.uuid,
        approvalStatus: this.ruleForm.approvalStatus,
        finalReviewOpinion: this.ruleForm.finalReviewOpinion,
      };

      if (this.reviewTypeflag === true) {
        finalReview(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });
            // this.$router.push("/headexamine")
            this.$router.push({
              name: 'headexamine',
              params: { formInline: this.formInline },
            });
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
        });
      } else if (this.reviewTypeflag === false) {
        storeFinalReview(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success',
            });
            //  this.$router.push("/headexamine")
            this.$router.push({
              name: 'headexamine',
              params: { formInline: this.formInline },
            });
          } else if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error',
            });
          }
        });
      }
    },
    getdetail() {
      this.loading = false;
      if (this.$route.params.shen == true) {
        let data = { uuid: this.$route.params.v.uuid };
        query_getStorZbPlanInfo(data).then((res) => {
          console.log(res);
          this.tableData = res.result.zbPlanOrgGoodsDTOS;
          this.$route.params.v = res.result;
          this.formCorp.planName = this.$route.params.v.planName;
          this.formCorp.beginTime = this.$route.params.v.beginTime;
          this.formCorp.endTime = this.$route.params.v.endTime;
          this.formCorp.storeType = String(this.$route.params.v.storeType);
          this.formCorp.managerArea = this.$route.params.v.managerArea;
          this.formCorp.openStatus = this.$route.params.v.openStatus;
          this.formCorp.buildingArea = this.$route.params.v.buildingArea;
          this.formCorp.practicalArea = this.$route.params.v.practicalArea;
          this.formCorp.leaseholdArea = this.$route.params.v.leaseholdArea;
          this.formCorp.warehouseArea = this.$route.params.v.warehouseArea;
          this.formCorp.zbHomeDTOList = this.$route.params.v.zbHomeDTOList;
          this.formCorp.planCode = this.$route.params.v.planCode;
          let approval = {
            approvalComments: this.$route.params.v.approvalComments,
            approvalStatus: this.$route.params.v.approvalStatus,
            approvalTime: this.$route.params.v.approvalTime,
            approvalUser: this.$route.params.v.approvalUser,
          };
          if (this.$route.params.v.approvalStatus > 1)
            this.tableData2.push(approval);
          console.log('11', this.tableData2);
          // if(this.formCorp.picUrl==null || this.formCorp.picUrl==""){
          //    this.flagimg=false
          //    }else{
          //      this.flagimg=true
          // }
        });
      } else if (this.$route.params.shen == false) {
        this.loading = false;
        let data = { uuid: this.$route.params.v.uuid };
        query_getStorZbPlanInfo(data).then((res) => {
          console.log(res);
          this.tableData = res.result.zbPlanOrgGoodsDTOS;
          this.$route.params.v = res.result;
          this.formCorp.planName = this.$route.params.v.planName;
          this.formCorp.beginTime = this.$route.params.v.beginTime;
          this.formCorp.endTime = this.$route.params.v.endTime;
          this.formCorp.storeType = String(this.$route.params.v.storeType);
          this.formCorp.managerArea = this.$route.params.v.managerArea;
          this.formCorp.openStatus = this.$route.params.v.openStatus;
          this.formCorp.buildingArea = this.$route.params.v.buildingArea;
          this.formCorp.practicalArea = this.$route.params.v.practicalArea;
          this.formCorp.leaseholdArea = this.$route.params.v.leaseholdArea;
          this.formCorp.warehouseArea = this.$route.params.v.warehouseArea;
          this.formCorp.zbHomeDTOList = this.$route.params.v.zbHomeDTOList;
          this.formCorp.planCode = this.$route.params.v.planCode;
          let approval = {
            approvalComments: this.$route.params.v.approvalComments,
            approvalStatus: this.$route.params.v.approvalStatus,
            approvalTime: this.$route.params.v.approvalTime,
            approvalUser: this.$route.params.v.approvalUser,
          };
          if (this.$route.params.v.approvalStatus > 1)
            this.tableData2.push(approval);
        });
      }
    },
    goback() {
      this.$router.go('-1');
    },
  },
};
</script>

<style lang="scss" scoped>
#add-cater-merchants {
  h2 {
    font-size: 24px;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(230, 231, 235);
  }
  .container {
    margin-top: 10px;
  }
  .el-input--medium .el-input__inner {
    height: auto !important;
  }
}
#add-cater-merchants.route-page {
  background: #fff;
  width: 80%;
  padding: 3% 0;
  margin: 0 auto;
  //   border: 2px #ccc dashed;
  margin-top: 2%;
}
#infoCaterMerchantscopy .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #fff;
  color: #666;
  border: none;
  cursor: not-allowed;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  //   background: #99a9bf;
}
.bg-purple {
  //   background: #d3dce6;
}
.bg-purple-light {
  //   background: #e5e9f2;
}
</style>
